﻿<%@ Page Title="" Language="C#" MasterPageFile="~/TestCase.Master" AutoEventWireup="true" CodeBehind="ResponsiveImageTests.aspx.cs" Inherits="OpenWaves.Web.Tests.ResponsiveImageTests" %>

<asp:Content runat="server" ContentPlaceHolderID="head">
    <script type="text/javascript" src="/OpenWaves.Web/Scripts/ow.responsiveImage.js">
        
    </script>    
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="TestCasePlaceHolder" runat="server">
    
        <ow:ResponsiveImage runat="server" ImageUrl="/Images/local.jpg" CssClass="EloMelo" ToolTip="Macio" AlternateText="AltMacio" Expando="ExpandoValue">
            <ow:ImageBreakpoint Name="Phone" Transformation="ScaleDownToFill" Width="100" Height="200"/>       
            <ow:ImageBreakpoint Name="Tablet" Transformation="ScaleDownToFill" Width="200" Height="400"/>       
            <ow:ImageBreakpoint Name="Desktop" Transformation="ScaleDownToFill" Width="400" Height="800"/>       
        </ow:ResponsiveImage>
        
        <ow:ResponsiveBackgroundImagePanel runat="server" ImageUrl="/Images/local.jpg?elomelo=meloelo">
            <Breakpoints>
                <ow:ImageBreakpoint Name="Phone" Transformation="ScaleToFill" Width="100" Height="200"/>       
                <ow:ImageBreakpoint Name="Tablet" Transformation="ScaleToFill" Width="200" Height="400"/>       
                <ow:ImageBreakpoint Name="Desktop" Transformation="ScaleToFill" Width="400" Height="800"/>                       
            </Breakpoints>
            <Content>
                <h1>EloMelo</h1>
            </Content>
        </ow:ResponsiveBackgroundImagePanel>
        
        <ow:ResponsiveImage runat="server" ImageUrl="/Images/local.jpg" CssClass="EloMelo" ToolTip="Macio" AlternateText="AltMacio" Expando="ExpandoValue" Transformation="ScaleDownToFill">
            <ow:ImageBreakpoint Name="Phone" Width="100" Height="200"/>       
            <ow:ImageBreakpoint Name="Tablet" Width="200" Height="400"/>       
            <ow:ImageBreakpoint Name="Desktop" Width="400" Height="800"/>       
        </ow:ResponsiveImage>

        <ow:ResponsiveImage runat="server" CssClass="EloMelo" ToolTip="Macio" AlternateText="AltMacio" Expando="ExpandoValue" Transformation="ScaleToFill">
            <ow:ImageBreakpoint Name="Phone" Width="100" Height="200"/>       
            <ow:ImageBreakpoint Name="Tablet" Width="200" Height="400"/>       
            <ow:ImageBreakpoint Name="Desktop" Width="400" Height="800"/>       
        </ow:ResponsiveImage>
        
        <ow:ResponsiveBackgroundImagePanel runat="server" ImageUrl="/Images/local.jpg?elomelo=meloelo" Transformation="ScaleToFill">
            <Breakpoints>
                <ow:ImageBreakpoint Name="Phone" Width="100" Height="200"/>       
                <ow:ImageBreakpoint Name="Tablet" Width="200" Height="400"/>       
                <ow:ImageBreakpoint Name="Desktop" Width="400" Height="800"/>                       
            </Breakpoints>
            <Content>
                <h1>EloMelo</h1>
            </Content>
        </ow:ResponsiveBackgroundImagePanel>

</asp:Content>
